<template>
  <div class="home">
    <div class="box">
        <div class="btu">
            <img class="tu" v-lazy="xqt.designTemplateImageUrl" alt="">
        </div>
        <div class="xqnr">
            <h4 class="title">{{ xqt.templateTitle }}</h4>
            <p class="fl">{{ xqt.kindTitle}}</p>
            <span class="jsa">图片编号是{{ xqt.designTemplateId }},该手机海报尺寸是{{xqt.width}} * {{ xqt.height }}。点击“立即使用”，《{{ xqt.templateTitle }}》一键生成，在线编辑图片，简单托拉拽，秒出精美 {{xqt.kindTitle}}</span>
            <div style="line-height:0;">
                <span @click="qp(x)" class="qp" v-for="x,i in bq" :key="i">{{ x }}</span> 
            </div>
            <h4 class="tj">为你推荐</h4>
            <div class="tus">
                <img class="tl" @click="tl(x)" v-for="x,i in imgs" :key="i" v-lazy="x.designTemplateImageUrl" alt="">
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            xqt:'',
            bq:[],
            imgs:[]
        }
    },
    created(){
        this.fb()
    },
    watch:{
        $route(to,from){
            if(from.query.id){
                this.$router.go()
            }
        }
    },
    methods:{
        fb(){   
            this.$http.post(`/list/designtemplate/getDetailCacheFileUrl.do?_dataType=json&_dataClientType=3client_type=40&id=${this.$route.query.id}&business_type=1%2C2%2C3`).then(res=>{
                this.xqt=res.data.body.currentTemplate
                this.imgs=res.data.body.recommendedTemplates
                console.log();
                this.bq=res.data.body.currentTemplate.keywords.split(' ')
            })
        },
        tl(x){
            this.$router.push({
                path:'/xq',
                query:{
                    id:x.designTemplateId
                }
            })
        },
        qp(x){
            this.$router.push({
                path:'/ss',
                query:{
                    key:x
                }
            })
        }
    }
    // https://api.chuangkit.com/designtemplate/getDetailCacheFileUrl.do?_dataType=json&_dataClientType=3
}
</script>

<style scoped>
    .box{
        padding:0 .24rem;
    }
    .btu{
        width: 7.02rem;
        height: 9.06rem;
        box-sizing: border-box;
        padding: .32rem;
        background-color: #e3e6e9;
        position: relative;
        border-radius:.2rem ;
    }
    .tu{
        width: 4.72rem;
        position: absolute;
        left: calc(7.02rem / 2 - 4.72rem / 2);
    }
    .title{
        font-size: .35rem;
        margin-top: .36rem;
        margin-bottom: .24rem;
    }
    .tj{
        font-size: .35rem;
        margin-bottom: .4rem;
        margin-top: .24rem;
    }
    .fl{
        font-size: .28rem;
        color:#737373;
        margin-bottom: .24rem;
    }
    .jsa{
        display: inline-block;
        font-size: .3rem;
        margin-bottom: .24rem;
    }
    .qp{
        display: inline-block;
        font-size: .26rem;
        width: auto;
        padding: 0 .32rem;
        height: .63rem;
        line-height: .63rem;
        background-color: #f3f4f9;
        border-radius: .63rem;
        margin: 0 .16rem .16rem  0;
    }
    .tl{
        width: 3.31rem;
        margin-left: .10rem;
        margin-right: .10rem;
    }
</style>